<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body,
    html {
      height: 100%;
    }

    .preloader {
      height: 100%;
      flex-direction: column;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #000;
    }

    .preloader__enter {
      opacity: 0;
      animation-name: preloader-fade-in;
      animation-iteration-count: 1;
      animation-duration: 0.9s;
      animation-delay: 1.35s;
      animation-fill-mode: forwards;
    }

    .preloader__bounce {
      text-align: center;
      animation-name: preloader-bounce;
      animation-duration: 0.9s;
      animation-iteration-count: infinite;
    }

    .preloader__logo {
      display: inline-block;
      animation-name: preloader-squash;
      animation-duration: 0.9s;
      animation-iteration-count: infinite;
      width: 60px;
      height: 60px;
      background-repeat: no-repeat;
      background-size: contain;
      background-image: url('./grafana_icon.svg')
    }

    .preloader__text {
      margin-top: 16px;
      font-weight: 500;
      font-size: 14px;
      font-family: Sans-serif;
      opacity: 0;
      animation-name: preloader-fade-in;
      animation-duration: 0.9s;
      animation-delay: 1.8s;
      animation-fill-mode: forwards;
      color: #fff;
    }

    @keyframes preloader-fade-in {
      0% {
        opacity: 0;
        animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes preloader-bounce {

      from,
      to {
        transform: translateY(0px);
        animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1);
      }

      50% {
        transform: translateY(-50px);
        animation-timing-function: cubic-bezier(0.9, 0, 0.7, 1);
      }
    }

    @keyframes preloader-squash {
      0% {
        transform: scaleX(1.3) scaleY(0.8);
        animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1);
        transform-origin: bottom center;
      }

      15% {
        transform: scaleX(0.75) scaleY(1.25);
        animation-timing-function: cubic-bezier(0, 0, 0.7, 0.75);
        transform-origin: bottom center;
      }

      55% {
        transform: scaleX(1.05) scaleY(0.95);
        animation-timing-function: cubic-bezier(0.9, 0, 1, 1);
        transform-origin: top center;
      }

      95% {
        transform: scaleX(0.75) scaleY(1.25);
        animation-timing-function: cubic-bezier(0, 0, 0, 1);
        transform-origin: bottom center;
      }

      100% {
        transform: scaleX(1.3) scaleY(0.8);
        transform-origin: bottom center;
        animation-timing-function: cubic-bezier(0, 0, 0.7, 1);
      }
    }
  </style>
</head>

<body>
  <div class="preloader">
    <div class="preloader__enter">
      <div class="preloader__bounce">
        <div class="preloader__logo"></div>
      </div>
    </div>
    <div class="preloader__text">Loading...</div>
  </div>
</body>

</html>